<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
</head>
<body>
  <!-- 头 -->
  <div class="site-header"></div>

  <h1>购物车</h1>

  <table border="1">
    <thead>
      <tr>
        <th><label><input type="checkbox" class="check_all" />全选</label></th>
        <th>商品编号</th>
        <th>图片</th>
        <th>标题</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody class="cart-body"></tbody>
    <tfoot>
      <tr>
        <td colspan="5">合计</td>
        <td colspan="3" class="total">9999.00</td>
      </tr>
    </tfoot>
  </table>

  <!-- 尾 -->
  <div class="site-footer"></div>

  <!-- 购物车表格主体模板 -->
  <script type="text/html" id="cart-template">
    {{each cart prod}}
      <tr data-prod="{{prod}}">
        <td><input type="checkbox" class="prod_check"></td>
        <td>{{prod.id}}</td>
        <td><img src="{{prod.image}}" alt="" style="width: 64px;"></td>
        <td>{{prod.title}}</td>
        <td>{{prod.price}}</td>
        <td>
          <button class="minus">-</button>
          <input type="number" value="{{prod.amount}}" size="2" class="amount">
          <button class="plus">+</button>
        </td>
        <td>{{(prod.price * prod.amount).toFixed(2)}}</td>
        <td><a href="/" class="remove">删除</a></td>
      </tr>
    {{/each}}
  </script>

  <script src="../libs/requirejs/require.js" data-main="../js/cart"></script>
</body>
</html>